<template>
	<view class="page" v-if="Object.keys(detail).length > 0">
		<navHead :datas="headData"></navHead>
		<view class="content  pd-30">
			<view class="progress_box bd-r40 pd-20">
				<view class="progress_bar_box">

					<view class="ft-28 c-33 fw-800">
						{{ '退款去向说明' }}
					</view>
					<view class="progress_bar_log flex mt-20">
						<image class="logs bd-r50c" :src="detail.info.user_info.avatar" mode="aspectFill">
						</image>
						<view class="text ml-10">
							<view class="ft-28 c-33 fw-800">{{ detail.info.user_info.nickname }}</view>
							<view class="ft-24 c-99">{{ detail.info.created_at }}</view>
						</view>
					</view>

					<view class="progress_bar_msg mt-20" v-if="detail.info.des">
						<view class="msg bd-r20 pd-20 ">
							<view class="progress_bar_content ft-24">
								<view class="text c-66">
									<rich-text :nodes="detail.info.des"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<!-- 					<view class="list_box pd-20 mt-20 bd-r40">
						<view class="imgList flex">
							<template v-for="i of 5" :key="i">
								<image class="imgs bd-r20 mr-20"
									src="https://cdn.oss.bon-top.cn/static_bc/images/group1.png" mode="aspectFill" />
							</template>
						</view>
					</view> -->
				</view>

			</view>
			<!-- 占位 -->
			<view style="height: 160rpx;"></view>
		</view>
		<view class="bottom">
			<view class="btn active" @click="back">
				知道了
			</view>
		</view>

	</view>
</template>

<script setup lang="js">
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import navHead from '@/components/navHead.vue';
	const headData = reactive({
		color: '#fff',
		title: '售后退款去向'
	})
	const back = () => {
		uni.navigateBack()
	}
	const detail = ref({})
	onLoad(option => {
		utils
			.request(
				api.getRefundDetail, {
					id: option.id
				},
				"get"
			)
			.then((res) => {
				detail.value = res.data
			});
	})
</script>

<style lang="scss" scoped>
	.content {

		.logs {
			width: 68rpx;
			height: 68rpx;

		}

	}


	.progress_box {
		background-color: #F8F8F8;

		.progress_bar_box {
			.progress_bar_text {
				.active {
					color: #333;
					font-weight: 800;
				}
			}

			.progress_bar_log {
				border-top: 2rpx solid #F1F1F1;
				padding: 20rpx 0;

			}

		}

		.progress_bar_msg {
			.msg {
				background-color: #fff;
			}

		}
	}

	.list_box {
		background-color: #fff;

		.imgList {
			.imgs {
				width: 106rpx;
				height: 136rpx;
				flex-shrink: 0;
			}
		}

		.list_detail {
			&_item {
				padding: 10rpx 0;

				.btn {
					background-color: #F1F1F1;
					padding: 10rpx;
					border-radius: 8rpx;
					color: #666;
				}
			}
		}

	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: start;
		justify-content: flex-end;
		background-color: #F8F8F8;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	
		.btn {
			height: 78rpx;
			width: 100%;
			line-height: 78rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			background-color: #F1F1F1;
			border-radius: 20rpx;
		}
	
		.active {
			background-color: #333;
			color: #fff;
		}
	}

	.boxView {
		min-height: 800rpx;
		background-color: #F8F8F8;
		border-radius: 40rpx 40rpx 0 0;

		.title {
			padding: 20rpx 20rpx 0;

			.icon {
				width: 36rpx;
				height: 36rpx;
			}
		}


		.describe_box {
			// background-color: #F8F8F8;

			.textarea {
				width: 100%;
				height: 500rpx;
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666;

				.textarea-placeholder {
					font-size: 28rpx;
					color: #999;
					// padding: 20rpx;
				}
			}

			.img_model {
				background-color: #fff;

				.imgBox {
					.img_list {
						flex: 1;

						.imgItem {
							.imgs {
								width: 106rpx;
								height: 136rpx;
							}

							width: 106rpx;
							height: 136rpx;
							position: relative;

							.icons {
								position: absolute;
								right: 5rpx;
								top: 5rpx;
							}
						}
					}

					.imgUpload {
						width: 106rpx;
						height: 136rpx;
						border-radius: 20rpx;
						border: 2rpx dashed #333;

					}

					:deep(.u-upload) {
						flex: 0;
					}
				}

			}



		}

		.btn_box {
			background-color: #F8F8F8;
			border-top: 2rpx solid rgb(235, 235, 235);

			.btn {
				width: 60%;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				background-color: #333;
				color: #DBF046;
			}
		}

	}
</style>